<template>
  <div class='container'>
    <el-container>
      <!-- 头部 -->
      <el-header>问卷调查系统</el-header>
      <!-- 主体 -->
      <el-main>
        <el-row>
          <el-col :span="7">
            <el-input placeholder="请输入内容"
                      v-model="search"
                      clearable>
            </el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary"
                       @click="searchData">查 询</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData"
                  border
                  stripe
                  @sort-change="orderingData">

          <el-table-column v-for="(item,index) in tableColumn.slice(0,tableColumn.length-2)"
                           :prop="item.prop"
                           :label="item.label"
                           :key=index
                           sortable="custom">
          </el-table-column>
          <el-table-column :label="tableColumn.slice(3, 4)[0].label"
                           v-if="tableColumn.length!==0">
            <template v-slot="scope">
              <!-- <el-link :href="'http://127.0.0.1:9000/survey/'+scope.row.pk">{{scope.row.handle_link}}</el-link> -->
              <router-link :to="{'name':'surveydetail',params:{'userId':scope.row.pk}}"
                           class="router-link">{{scope.row.handle_link}} </router-link>
            </template>
          </el-table-column>
          <el-table-column label="
                       操作">
            <template v-slot="scope">
              <el-button size="mini">查看报告</el-button>
              <el-button size="mini"
                         type="danger"
                         @click=DownloadFile(scope.row.pk)>下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-size="limit"
                       :page-sizes="[1, 2, 5, 10]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">>
        </el-pagination>
      </el-main>
      <!-- 尾部 -->
      <el-footer>Copyright-2021</el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 表格的列名
      tableColumn: [
      ],
      // 表格数据
      tableData: [],
      // 输入框数据
      search: '',
      // 总数据个数
      total: 0,
      limit: 2,
      offset: 0,
      // 排序
      ordering: ''

    }
  },

  mounted () {
    // 获取数据
    this.initData()
  },
  methods: {
    // 获取数据
    async initData () {
      const { data: res } = await this.$http.get('/api/surveys/', { params: { search: this.search, limit: this.limit, offset: this.offset, ordering: this.ordering } })
      // console.log(res.data)
      this.tableColumn = res.data.table_column
      this.tableData = res.data.table_data.data
      this.total = res.data.table_data.total
    },
    // 点击当前页
    handleCurrentChange (page) {
      this.offset = (page - 1) * this.limit
      this.initData()
    },
    // 查询数据
    searchData () {
      this.offset = 0
      this.initData()
    },
    // 每页显示条数变化触发事件
    handleSizeChange (newsize) {
      this.limit = newsize
      this.initData()
    },
    // 排序事件
    orderingData (column) {
      console.log(column)
      if (column.order === null) {
        this.ordering = ''
        this.initData()
        return
      }
      const orderColumn = column.order === 'ascending' ? column.prop : `-${column.prop}`
      this.ordering = orderColumn
      this.initData()
    },
    // 下载文件
    DownloadFile (id) {
      window.open('http://127.0.0.1:9000/' + id + '/download/', '_self')
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-table {
  width: 100%;
}
.router-link {
  color: #333;
}
</style>
